<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>

    <script src="../d3.js"></script>
    <script>
      const array = ["zs", "ls", "dmc"];

      //    const selection  = d3.selectAll('div')
      //     array.forEach((e,i)=>{
      //         selection.filter(`:nth-child(${i+1})`).text(e)
      //     })

      //     //...

      //     array.forEach((e,i)=>{
      //         selection.filter(`:nth-child(${i+1})`).attr('id',e);
      //     })



      
      // const selection = d3.selectAll('div');
      // selection.datum('dmc')
      // selection.text(function(d,i){
      //     console.log(d,i);
      //     return d + (i+1);
      // });
      // selection.attr("id",(d,i)=>d+(i+1))


      
      const selection = d3.selectAll("div");

      selection.data(array);

      selection.text((d, i) => {
        console.log(d, i);
        return d;
      });

      selection.attr("id", (d) => d);

      d3.selectAll("div").attr("class", (d) => d);
    </script>
  </body>
</html>
